import { reactive, onMounted } from 'vue'
import axios, { AxiosError } from 'axios'


/**
 * 
 * hooks 本质 就是一个函数， 返回 一个数据，函数,任何东西都可以
 *  一般返回这个数据，以及操作数据的方法，有点类似面向对象编程的感觉
 * 
 * hooks 中 可以定义 生命周期的钩子，来执行相关操作，这个和组件的生命周期是一样的， 
 *      watch ,computed 等
 * onMounted  onBeforeMount 等。
 * @returns 
 * 
 * 
 * 
 */

export default function useDog() {
    // 定义一个 dogList 
    let dogList = reactive<string[]>([])

    // 方法
    async function getDog() {
        try {
            // 发请求
            let { data } = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            // 维护数据
            console.log(333333,data.message)
            // debugger
            dogList.push(data.message)
        } catch (error) {
            // 处理错误
            const err = <AxiosError>error
            console.log(err.message)
        }
    }

    // 挂载钩子
    onMounted(() => {
        getDog()
    })

    //向外部暴露数据, 数据，方法， 数组，对象 任何形式都可以
    return { dogList, getDog }
}